<template>
  <div class="manager-content">
    <div class="manager-content_header">
      <Menu v-model="menuValue" mode="horizontal">
        <MenuItem name="post">文章({{ totalPost }})</MenuItem>
        <MenuItem name="draft">草稿箱({{ totalDraft }})</MenuItem>
      </Menu>
    </div>
    <div class="manager-content_items">
      <div class="item" v-for="item in postList" :key="item.id">
        <div class="title">
          <h5 @click="editPost(item)">{{ item.title }}</h5>
          <span>{{ item.createTime }}</span>
        </div>
        <div class="option">
          <div class="option-left">
            <p>阅读<span>1221</span></p>
            <span>·</span>
            <p>评论<span>1221</span></p>
          </div>
          <div class="option-right">
            <span>查看数据</span>
            <span @click="editPost(item)">编辑</span>
            <span @click="deletePost(item)">删除</span>
            <span>浏览</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '../../../api/blog'
export default {
  data() {
    return {
      postList: [],
      menuValue: 'post',
      totalPost: 12,
      totalDraft: 1
    }
  },
  methods: {
    // 获取文章列表
    async getPostList() {
      try {
        const res = await api.getPostList()
        if (res.code === 200) {
          this.postList = res.data
          this.totalPost = res.data.length
        }
      } catch (err) {
        console.log(err)
      }
    },

    // 删除文章
    deletePost(item) {
      const that = this
      this.$Modal.delete({
        onOk: async () => {
          const { id } = item
          const params = { id }
          try {
            const res = await api.delPost(params)
            if (res.code === 200) {
              that.$Message.success(res.message)
              that.getPostList()
            } else {
              that.$Message.error(res.message)
            }
          } catch (err) {
            console.log(err)
          }
        }
      })
    },
    editPost(item) {
      this.$router.push({ name: 'create', params: item })
    }
  },
  mounted() {
    this.getPostList()
  }
}
</script>

<style></style>
